<template>
  <div class="event">
    <a-form
      ref="ruleForm"
      class="form"
      :colon="false"
      v-model="form"
      :label-col="{ span: 4 }"
      :wrapperCol="{ span: 20 }">
      <a-form-item
        label="关联字段"
        prop="source"
        class="row"
      >
        <a-select v-model="form.source" allowClear @change="handleSourceChange">
          <a-select-option v-for="option in sourceOptions" :key="option.value">
            {{ option.label }}
          </a-select-option>
        </a-select>

      </a-form-item>

      <a-table
        :row-selection="{ selectedRowKeys, onChange: handleSelectChange }"
        :columns="columns"
        :data-source="data"
        :pagination="false"
      >
        <div slot="component" slot-scope="value">{{ value }}</div>
        <a-select
          :disabled="!form.source"
          slot="field"
          slot-scope="value, row, index"
          :value="value"
          class="select"
          @change="(newValue)=> handleFieldChange(newValue,row, index)">
          <a-select-option v-for="item in filterOptions(row.options)" :key="item.value">{{ item.label }}</a-select-option>
        </a-select>
      </a-table>
      <a-form-item
        label="启用联动设置"
        prop="isEnable"
        class="row"
      >
        <a-switch v-model="form.isEnable" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script >
import { mapState } from "vuex"
import { getAllAnalysisComponentByEditType, getAllAnalysisComponentTypes, getFieldListByComponent, getFieldListByComponentList } from '../../../lib/analysisData'
import getAttrList from "./attr"

// 联动设置
export default {
  data () {
    return {
      customFormJson: [],
      // selectedRowKeys: [],
      columns: [
        {
          title: '目标组件',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '目标字段',
          dataIndex: 'field',
          scopedSlots: { customRender: 'field' },
        },
      ]
    }
  },
  computed: {
    ...mapState('lowCode', {
      selectedComponent: state => state.selectedComponent,
      selectFilterFieldList: state => state.selectFilterFieldList
    }),
    formJson () {
      return getAttrList(this.selectedComponent.tag, this.$store.state.lowCode)
    },
    sourceOptions () {
      return getFieldListByComponent(this.selectedComponent)
    },
    form () {
      return this.selectedComponent.linkage
    },
    data () {
      return this.selectedComponent.linkage.componentList
    },
    selectedRowKeys () {
      console.log((this.data || []))
      // return []
      return this.selectedComponent.linkage.componentList.filter(item => item.isCheck).map(item => item.key)
    }
  },
  methods: {
    handleSelectChange (selectedRowKeys) {
      this.selectedComponent.linkage.componentList.forEach(item => {
        item.isCheck = selectedRowKeys.includes(item.key)
      })
    },
    handleFieldChange (value, row, index) {
      this.data[index].field = value
      this.$forceUpdate()
      // this.$store.commit("lowCode/setSelectedComponent", this.selectedComponent)
      console.log(value, row, index)
      // this.$set(this.data,index, {
      //   ...row,
      //   field: value
      // })
    },
    filterOptions (options) {
      if (this.form.source) {
        const colType = this.sourceOptions.find(item => item.value === this.form.source).colType
        return options.filter(item => item.colType === colType)
      }
      else {
        return options
      }
    },
    handleSourceChange () {
      this.selectedComponent.linkage.componentList.forEach(item => {
        item.field = undefined
      })
    }

  },


}
</script>

<style lang="less" scoped>
  @import url("./index.less");
</style>
